<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
</head>

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/animate.css" />
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
	body {
		position: relative;
	}

	ul.nav-pills {
		top: 0px;
		left: 0px;
		position: fixed;
	}

	div.col-sm-9 div {
		height: 50px;
		font-size: 18px;
	}

	@media screen and (max-width: 810px) {

		#section1,
		#section2,
		#section3,
		#section41,
		#section42 {
			margin-left: 150px;
		}
	}

	#myScrollspy {
		height: 100%;
		background: #000;
	}

	.nav-stacked {
		width: 300px;
		padding-top: 30px;
		/* height: 100%;	
			background: #000000; */
	}
</style>
</head>

<body data-spy="scroll" data-target="#myScrollspy">

	<div class="container">
		<div class="row">
			<nav class="col-sm-12 col-md-2 text-center" id="myScrollspy" data-offset="20">
				<ul class="nav nav-pills nav-stacked wow rollIn">
					<li><img src="images/1.gif" class="img-responsive center-block"></li>
					<li class="text-center">张三的主页</li>
					<li><a href="index.html">首页</a></li>
					<li class="active"><a href="#section1">个人介绍</a></li>
					<li><a href="#section2">个人作品</a></li>
					<li><a href="#section3">发布文章</a></li>
				</ul>
			</nav>
			<div class="col-sm-12 col-md-10">
				<div class="col-md-12">
					<div class="alert alert-success alert-dismissable wow lightSpeedIn"
						style="margin-top: 110px;height: 190px;position: relative;">
						<button type="button" class="close" data-dismiss="alert" aria-hidden="true"
							id="section1">×</button>
						<h4>
							欢迎!
						</h4> <strong>欢迎</strong>来到张三的主页
					</div>
					<div class="col-md-12">
						<div class="col-md-12" id="section2" style="margin-top: 50px;margin-bottom: 50px;">
							<div class="jumbotron wow slideInRight">
								<h1>
									张三
								</h1>
								<p>
									擅长java，c++,前后端交互式设计
								</p>
								<p>
									<a class="btn btn-primary btn-large" href="#">了解更多</a>
								</p>
							</div>
						</div>

						<div class="col-md-12">
							<div class="container">
								<div class="row" id="section2">
									<div class="col-xs-6 col-md-3 wow slideInLeft" data-wow-delay="0.5s">
										<a href="#" class="thumbnail">
											<img src="images/pic1.png"
												style="height: 180px; width: 100%; display: block;" alt="">
										</a>
										<div class="caption">
											<h3>优秀作品1</h3>
											<p>为信息管理系统设计的用户管理界面提供用户查询，用户添加，用户删除和修改等功能...
											</p>
											<p>
												<a href="usermanage.html" class="btn btn-primary">查看详情</a>
												<a href="##" class="btn btn-info">收藏作品</a>
											</p>
										</div>
									</div>
									<div class="col-xs-6 col-md-3 wow slideInRight" data-wow-delay="0.3s">
										<a href="#" class="thumbnail">
											<img alt="100%x180"
												src="images/pic2.png"
												style="height: 180px; width: 100%; display: block;">
										</a>
										<div class="caption">
											<h3>优秀作品2</h3>
											<p> 为信息管理系统设计的内容管理界面并提供用户内容、查看、添加、删除、置顶等功能...
											</p>
											<p>
												<a href="contentmanage.html" class="btn btn-primary">查看详情</a>
												<a href="##" class="btn btn-info">收藏作品</a>
											</p>
										</div>
									</div>
									<div class="col-xs-6 col-md-3 wow slideInRight" data-wow-delay="0.5s">
										<a href="#" class="thumbnail">
											<img alt="100%x180"
												src="images/pic3.png"
												style="height: 180px; width: 100%; display: block;">
										</a>
										<div class="caption">
											<h3>优秀作品3</h3>
											<p>为信息管理系统设计的标签管理界面并提供用户标签的添加、删除等功能，为文章添加合适的标签便于检索...
											</p>
											<p>
												<a href="tagmanage.html" class="btn btn-primary">查看详情</a>
												<a href="##" class="btn btn-info">收藏作品</a>
											</p>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="col-md-12" style="margin-top: 60px;">
							<div class="col-md-12">
								<table class="table table-hover wow slideInRight" id="section3">
									<thead>
										<tr>
											<th>
												文章编号
											</th>
											<th>
												文章标题
											</th>
											<th>
												发布时间
											</th>
											<th>
												浏览次数
											</th>
										</tr>
									</thead>
									<tbody>
										
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>





			</div>


		</div>
	</div>




</body>

</html>

<script type="text/javascript" src="js/wow.js">

</script>
<script type="text/javascript">


	new WOW().init();
	setTimeout(function () {
		$('.alert-success').animate({ left: '1500px' }).fadeOut('fast')
	}, 1500)



</script>

<script type="text/javascript">
											function ajax(){
																$.ajax({
																	type: "get",//发送请求的类型post，get
																	dataType: "json",//默认是text
																	url: `http://127.0.0.1:7300/mock/5ee96c5cc5fadd342c8a0931/totalData/getArti`,//发送的地址
																	success: function (msg) {//成功的回调
																	var data=msg.data
																	// console.log(data);
																	data.forEach(item=>{
																		$('.table tbody').append(`<tr><td>${item.id}</td><td>${item.title}</td><td>${item.publish}</td><td>${item.view}</td></tr>`)
																	})
																	
																	
																		
																	},
																	error: function (error) {
																		console.log(error.responseText);
																	}
																});
															}
												     
																ajax();
											
										</script>